<template>
    <div class="main-wrapper">
      <div class="metric-search">
        <span>指标类别：</span>
        <el-select v-model="selectedOption" placeholder="请选择" @change="getList">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="metric-content">
        <MyTable 
          :currentTable ="currentTableTag"
          :hasSelection="false"
          :tableData="lists" 
          :tableItem="columns"
          :total="total"
          @handlePageChange="handlePageChange"
          />
      </div>
    </div>
  </template>
  <script>
    import MyTable from '@/components/MyTable'
    import {fetchMetricCategory, fetchMetricList} from '@/api/metric';
    export default {
      components:{ MyTable },
      data(){
        return {
          currentTableTag:'metric-driving',
          options:[],
          selectedOption: '',
          lists: [],
          columns:[
            {
              name: '指标名称',
              prop: 'metric_name',
              width: '300px'
            },
            {
              name: '类别',
              prop: 'category',
              width: '200px'
            },
            {
              name: '子类别',
              prop: 'sub_category',
              width: '200px'
            },
            {
              name: '描述',
              prop: 'des',
              width: ''
            },
          ],
          total: 0,
          pageIndex: 1,
          pageSize: 20,
        }
      },
      props: {
        categoryFlag: String
      },
      created(){
        this.getCatogry();      
      },
      methods: {
        getCatogry(){
          fetchMetricCategory({scene: this.categoryFlag}).then(res => {
            if(res.category && res.category.length>0){
             let result = res.category
             result.forEach(element => {
              this.options.push({label: element, value:element})
             })
             this.selectedOption = res.category[0]
             this.getList()
            }
          })
        },
        getList(pageParams){
          const params = pageParams || {
            scene: this.categoryFlag,
            sub_category: this.selectedOption,
            page_num: this.pageIndex,
            page_size: this.pageSize
          } 
          fetchMetricList(params).then(res => {
            if(res && res.data){
              this.lists = res.data
              this.total = res.total

            }
          })
        },
        // 切换pagesize 、切换页码
        handlePageChange(pageData) {
          const pageParams = {
            ...pageData,
            scene: this.categoryFlag,
            sub_category: this.selectedOption,
          }
          this.getList(pageParams)
        }
      }
    }
  </script>
  <style lang="scss" scoped>
  .metric-search{
    >span {
      color: #606266;
    }
  }
  .metric-content{
    margin-top: 20px;
  }
  </style>